<template>
  <div>


    <div style="border: 1px solid red; margin-top: 20px"></div>
    <el-divider></el-divider>

    <div class="about">
      <div >
        <div style="margin-top: 10px;margin-bottom: 20px;">封装的树形结构</div>
        <Tree :isSelect="isSelect" :data="treeData" @node-click="handle" @change="loadData" />
      </div>
      <div>
        <div style="margin-top: 10px;margin-bottom: 20px;">动态表单</div>
        <CustomTable :column-list="columnList" :table-data="tableData">
          <template #operate="{ row }">
            <el-button size="small">删除</el-button>
            <el-button size="small" type="primary" @click="onEdit(row)">
              编辑
            </el-button>
          </template>
        </CustomTable>
      </div>

    </div>

	</div>
</template>

<script>
import CustomTable from "@/components/my-table/CustomTable.vue";
import Tree from '@/components/my-tree/Tree.vue';
import json from './mock/Mock';


export default {

  components: {
    CustomTable,
    Tree
  },
  data() {
    return {
      columnList: [
        {
          type: "text",
          prop: "name",
          columnAttrs: {
            label: "姓名",
            width: "180",
          },
        },
        {
          type: "text",
          prop: "date",
          columnAttrs: {
            label: "日期",
            width: "230",
          },
        },
        {
          type: "func",
          prop: "sex",
          columnAttrs: {
            label: "性别",
            width: "150",
          },
          call: (row) => {
            switch (row.sex) {
              case 1: {
                return "男";
              }
              case 2: {
                return "女";
              }
              default: {
                return "未知";
              }
            }
          },
        },
        {
          type: "slot",
          slotName: "operate",
          prop: "operate",
          columnAttrs: {
            label: "操作",
            width: "240",
          },
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          sex: 1,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          sex: 2,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          sex: 3,
        },
      ],
      treeData: [],
      isSelect: false,
      defaultProps: {
        children: 'children',
        label: 'title',
        key: 'id',
      },
    };
  },
  created() {
    this.treeData = json.data.list
  },
  methods: {
    onEdit(row) {
      console.log(row);
    },
    handle(node) {
      console.log('点击节点 Data : ', node)
    },
    loadData(treeNode) {
      console.log(treeNode)
      // eg: 动态更新子节点
      // treeNode.children = JSON.parse(JSON.stringify(json.data.list))
      // this.treeData = [...this.treeData]
    },
  },
};
</script>

<style scoped>
 .about {
   margin-left: 40px;
   display: flex;
   flex-direction: row;  /* 主轴方向 */
   justify-content: space-around ;
 }
</style>